<template>
  <div class="cont" ref="fullscreenContainer">
    <Myhead title="项目管理" />
    <div class="w">
      <div class="left"  @click="handleJump">
   <div class="title-project">
    <span style="width: 50%;">项目名称</span>
    <span style="width: 30%;">交付日期</span>
    <span style="width: 20%;">交付剩余天数</span>
   </div>
   <vue-seamless-scroll :data="proList" class="seamless-warp" :class-option="classOption">
   <div class="content">
    <div class="text"  v-for="(item,index) in proList" :key="index">
<span style="width: 50%;">{{item.proName}}</span>
<span style="width: 30%;">{{item.proEnd}}</span>
<span style="width: 20%;text-align: center;"><el-progress type="circle" :percentage="item.baifen"  text-color="#ffff" :show-text="false"></el-progress></span>
<span style="position: absolute;right:.7813rem;width: .6563rem;text-align: center;" >{{ item.alarNum }}</span>
    </div>

   </div>
  </vue-seamless-scroll>
      </div>
 
    </div>
    <Myfoot />
  </div>
</template>

<script>
import Myhead from "./components/my-head.vue";
import Myfoot from "./components/my-foot.vue";
import {ProjectList} from "@/api"
export default {
  data() {
    return {
      proList:[]
    };
  },
  methods: {
    getProjectList(){
      ProjectList().then(res=>{
console.log(res);
        this.proList = res.data.data
      })
  },
  handleJump() {
      console.log('1111');
            this.$router.push('/')
        },
        redirectToPage() {
    // 使用setTimeout()函数设置定时器，参数1表示要等待的时间（单位为毫秒），参数2表示要执行的函数或者代码片段
    var projecttime = setTimeout(() => {
      // 这里写入需要执行的跳转逻辑，比如路由导航到其他页面
      this.$router.push('/')
    }, 30000); // 3000ms = 3s，表示等待3秒后再执行跳转操作
  },
  
  },
  components: {
    Myhead,
    Myfoot,
  },

  mounted() {
this.getProjectList()
this.redirectToPage()
// setInterval(() => {
//   this.$router.push('/')
// }, 30000);
  },
  computed: {
    classOption () {
  return {
  step: 1, // 数值越大速度滚动越快
  limitMoveNum: this.proList.length, // 开始无缝滚动的数据量 this.dataList.length
  hoverStop: true, // 是否开启鼠标悬停stop
  direction: 1, // 0向下 1向上 2向左 3向右
  openWatch: true, // 开启数据实时监控刷新dom
  singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
  }
  },

  },
};
</script>

<style lang="scss" scoped>
.w {
  display: flex;
  width: 9.8333rem;
  margin: 0 auto;
  justify-content: space-between;
}
.left {
  width: 9.8333rem;
  height: 80vh;
  margin-top: 0.1823rem;
  border-radius: 0.0208rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(0.1615rem);
  box-shadow: 0px 0.0521rem 0.0781rem 0px rgba(3, 30, 62, 0.3);
}
.title-project{
font-size: .3015rem;
width: 100%;
display: flex;
padding: .1875rem;
}
.content{
  height:100%;
  // overflow: hidden;
  // display: flex;
  font-size: .3125rem;
  // background-color: aqua;
}
.text{
  width: 9.5156rem;
  height: .9792rem;
  border-radius: .0754rem;
margin: .1563rem auto;
display: flex;
align-items: center;
background: rgba(8, 14, 27, 0.5);
}
.seamless-warp{
 width: 100%;
 height: 65vh;
//  margin-top: 0.1094rem;
 overflow: hidden;
}
</style>
